<template>
  <div class="afast-button use-hover" :class="`${type ? type + ' ' : ''}${round ? 'round ' : ''}${size ? size : ''}`"
    :style="{ background, color }">
    <Icon v-if="icon" class="icon" :name="icon" :fill-color="iconColor"></Icon>
    {{ !round ? text : "" }}
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import Icon from "./AfastIcon.vue";

const props = withDefaults(defineProps<{
  text?: string,
  type?: string
  icon?: string
  round?: boolean,
  color?: Color,
  background?: Color,
  size?: ButtonSize
}>(),{
  type: 'default',
  round: false,
  text: '确定'
});
const iconColor = computed<Color>(() => {
  return `var(--${props.type}-button-text-color)`;
});
</script>
<style lang="scss">
.afast-button {
  width: 100px;
  height: 30px;
  background: var(--default-color);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  color: var(--default-button-text-color);
  border: 1px solid var(--default-button-border-color);
  display: flex;
  align-items: center;
  justify-content: center;

  .icon {
    margin-top: 1px;
  }
}
.afast-button.mini{
  width: 90px;
  height: 25px;
  font-size: 13px;
}
.afast-button.huge{
  width: 120px;
  height: 40px;
}

.afast-button.primary {
  background: var(--primary-color);
  color: var(--primary-button-text-color);
  border: 1px solid var(--primary-button-border-color);
}

.afast-button.success {
  background: var(--success-color);
  color: var(--success-button-text-color);
  border: 1px solid var(--success-button-border-color);
}

.afast-button.warn {
  background: var(--warn-color);
  color: var(--warn-button-text-color);
  border: 1px solid var(--warn-button-border-color);
}

.afast-button.fail {
  background: var(--fail-color);
  color: var(--fail-button-text-color);
  border: 1px solid var(--fail-button-border-color);
}

.afast-button.round {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
</style>
